<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>用一本书连接两个有趣的灵魂</title>
	<link rel="stylesheet" href="/assets/activity/jindi-3/swiper-3.4.2.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi-3/animate.min.css">
	<link rel="stylesheet" href="/assets/activity/jindi-3/book.css">


</head>
<body>
<div class="swiper-container">
	<div class="player active">
		<img src="/assets/activity/jindi-2/img/palyer.png" alt="" class="player-img">
		<audio src="http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-3.mp3" autoplay="autoplay" loop="loop" id="media"></audio>
	</div>
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background: url('/assets/activity/jindi-3/images/index.png') no-repeat center #fffffb;background-size: 100% 100%;">
			<div class="titlex">
				<img src="/assets/activity/jindi-3/images/logo.png" alt="" class="logo">
			</div>

			<p class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">用一本书连接两个有趣的灵魂</p>
			<img src="/assets/activity/jindi-3/images/ship.png" alt="" class="ship">
		</div>
		<div class="swiper-slide" style="">
			<div class="titlex">
				<img src="/assets/activity/jindi-3/images/logo.png" alt="" class="logo">
<!--				<img src="/assets/activity/jindi-3/images/boy2.png" alt="" class="boy">-->
			</div>
			<div class="clear"></div>
			<div style="">
				<p class="partner ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" style="">寻找同样爱书的人</p>
				<p class="looking ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.6s" style="">Looking for soulmate</p>
				<div style="line-height: 16px;font-size: 16px;" class="public_details">
					<p class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.9s">录制不超过一分钟语音，向同样爱书的人推荐一本最喜欢的文字让你的爱书在更多人之间传递，分享一本书或许能找到心灵契合的那个他</p>
				</div>
			</div>
			<div style="height: 100px;z-index: 1000">
				<img src="/assets/activity/jindi-3/images/girl.png" alt="" class="girl ani" swiper-animate-effect="fadeInLeftBig" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
			</div>
			<div style="clear: both"></div>
			<div style="text-align: center;z-index: 1000">
				<img src="/assets/activity/jindi-3/images/cloud_villa.png" alt="" class="cloud">
			</div>
			<div style="" class="friends ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				<img src="/assets/activity/jindi-3/images/friends.png" alt="" style="width: 100%;height: 180px">
			</div>
		</div>
		<div class="swiper-slide stop-swiping">
			<div style="text-align: right">
				<img src="/assets/activity/jindi-3/images/logo.png" alt="" class="logo">
			</div>
			<div style="width: 70%;margin-left: 15%;" class="list">
				<ul>
					<li onclick="goToDetail(1,'<?php echo $books[1]['second'];?>','<?php echo $books[1]['orig'];?>')">
						<p class="bookName">《小王子》</p>
						<img src="/assets/activity/jindi-3/images/prince.png" alt="">
						<p class="progressTime"><span><?php echo $books[1]['orig'];?></span><span>6:00</span></p>
						<div class="myProgress">
							<div class="myBar" style="width: <?php echo $books[1]['percent'];?>"></div>
						</div>
					</li>
					<li onclick="goToDetail(2,'<?php echo $books[2]['second'];?>','<?php echo $books[2]['orig'];?>')">
						<p class="bookName">《长颈鹿不会跳舞》</p>
						<img src="/assets/activity/jindi-3/images/Giraffe1.png" alt="">
						<p class="progressTime"><span><?php echo $books[2]['orig'];?></span><span>6:00</span></p>
						<div class="myProgress">
							<div class="myBar" style="width: <?php echo $books[2]['percent'];?>"></div>
						</div>
					</li>
					<li onclick="goToDetail(3,'<?php echo $books[3]['second'];?>','<?php echo $books[3]['orig'];?>')">
						<p class="bookName">《能干的小海狸》</p>
						<img src="/assets/activity/jindi-3/images/beaver.png" alt="">
						<p class="progressTime"><span><?php echo $books[3]['orig'];?></span><span>6:00</span></p>
						<div class="myProgress">
							<div class="myBar" style="width: <?php echo $books[3]['percent'];?>"></div>
						</div>
					</li>
					<li onclick="goToDetail(4,'<?php echo $books[4]['second'];?>','<?php echo $books[4]['orig'];?>')">
						<p class="bookName">《伊索寓言》</p>
						<img src="/assets/activity/jindi-3/images/Aesop.png" alt="">
						<p class="progressTime"><span><?php echo $books[4]['orig'];?></span><span>6:00</span></p>
						<div class="myProgress">
							<div class="myBar" style="width: <?php echo $books[4]['percent'];?>"></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="swiper-slide stop-swiping">
			<div style="text-align: left">
				<img src="/assets/activity/jindi-3/images/logo.png" alt="" class="logo">
			</div>
			<div class="recommend">
				推荐书目
			</div>
			<div style="text-align: center;height: 300px;">
				<!--四种书-->
				<img id="book1" src="/assets/activity/jindi-3/images/princeBook.png" alt="" style="width: 42%;" class="princeBook">
				<img id="book2" src="/assets/activity/jindi-3/images/giraffeBook.png" alt="" style="width: 42%;display: none;" class="giraffeBook">
				<img id="book4" src="/assets/activity/jindi-3/images/aesopBook.png" alt="" style="width: 42%;display: none;" class="princeBook">
				<img id="book3" src="/assets/activity/jindi-3/images/veaverBook.png" alt="" style="width: 42%;display: none;" class="princeBook">
			</div>
			<p class="progressTime"><span id="duration"><?php echo $books[1]['orig'];?></span><span id="totalDuration">6:00</span></p>
			<div class="myProgress">
				<div class="myBar" id="curBar" style="width: <?php echo $books[1]['percent'];?>"></div>
			</div>
			<div class="recordBtn">
				<ul>
					<li id="startRecord" class="records">
						<span>长按录音</span>
					</li>
					<li id="uploadVoice" book="1" class="sharing">
						<span>立即发布</span>
					</li>
					<li id="playVoice" class="tryListening">
						<span>点击试听</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="swiper-slide" style="background: url('/assets/activity/jindi-3/images/recommoendSuccess_bg.png') no-repeat center #fffffb;
        background-size: 100% 100%;">
			<div style="text-align: left">
				<img src="/assets/activity/jindi-3/images/logo.png" alt="" class="logo">
			</div>
			<div style="font-size: 20px;text-align: right;padding-right: 10%;margin-bottom: 30px;margin-top: 50px;" class="congratulation ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				恭喜您录制完成
			</div>
			<div style="font-size: 16px;text-align: right;padding-right: 10%" class="details ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
				用理想的分贝震动每一根阅读神经<br>让思想行走，做时间的朋友<br>让孩子成为期待中的自己
			</div>
			<div style="position: absolute;left: 0;bottom: 0;width: auto">
				<img src="/assets/activity/jindi-3/images/friendsAndbook.png" alt="" style="width: 100%;">
			</div>
		</div>
		<div class="swiper-slide" style="background: url('/assets/activity/jindi-3/images/share_bg.png') no-repeat center;
        background-size: 100% 100%;">
			<span class="shareTp">分享到朋友圈</span>
			<div class="cover">
				<p>阅读数：<span class="num"><?php echo $view_nums;?></span>	</p >
			</div>
		</div>
	</div>
</div>

<div style="" class="rightTo" ><<&nbsp;<span style="font-size: 14px;vertical-align: top;">向左滑动</span></div>
<div class="shareCover"></div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="/assets/activity/jindi-3/swiper-3.4.2.min.js"></script>
<script src="/assets/activity/jindi-3/swiper.animate1.0.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
	var mySwiper;
	var booksDuration = ["360","360","360","360"];
	var booksDuration2 = ["6:00","6:00","6:00","6:00"];
	$(function () {
		mySwiper = new Swiper ('.swiper-container', {

			loop: false,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				swiperAnimateCache(swiper); //隐藏动画元素
				swiperAnimate(swiper); //初始化完成开始动画

			},
			onSlideChangeEnd: function(swiper){
				swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				if(swiper.activeIndex == 2 || swiper.activeIndex == 5){
					$(".rightTo").hide();
				}else{
					$(".rightTo").show();

				}
			},
			noSwiping : true,
			noSwipingClass : 'stop-swiping'
		})
	})
	function goToDetail(id, duration, minite){
		var bfb = GetPercent(duration,booksDuration[id-1])
		$("#book1,#book2,#book3,#book4").hide();
		$("#book"+id).show();
		$("#uploadVoice").attr("book",id);
		$("#duration").html(minite);
		$("#totalDuration").html(booksDuration2[id]);
		$("#curBar").css("width",bfb);
		mySwiper.slideTo(3, 1000, false);
		$(".rightTo").hide();
	}
	function GetPercent(num, total) {
		num = parseFloat(num);
		total = parseFloat(total);
		if (isNaN(num) || isNaN(total)) {
			return "-";
		}
		return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + "%");
	}
	$(".shareTp").click(function () {
		$(".shareCover").show();
	});
	$(".shareCover").on('click', function(){
		$(this).hide();

	});
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	wx.config(<?php echo $js->config(array(
		'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'startRecord',
		'stopRecord',
		'onVoiceRecordEnd',
		'playVoice',
		'pauseVoice',
		'stopVoice',
		'onVoicePlayEnd',
		'uploadVoice',
		'downloadVoice'
		), false) ?>);
	wx.ready(function () {
		wx.onMenuShareTimeline({
			title: '用一本书连接两个有趣的灵魂', // 分享标题
			desc: '分享一本书或许能找到心灵契合的那个他', // 分享描述
			link: 'http://udfang.com/activity/html5three', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-3/images/prince.png', // 分享图标
		});
		wx.onMenuShareAppMessage({
			title: '用一本书连接两个有趣的灵魂', // 分享标题
			desc: '分享一本书或许能找到心灵契合的那个他', // 分享描述
			link: 'http://udfang.com/activity/html5three', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-3/images/prince.png', // 分享图标
		});
		// 4 音频接口
		var voice = {
			localId: '',
			serverId: '',
			START:'',
			END:''
		};
		var recordTimer;
		$('#startRecord').on('touchstart', function(event){
			event.preventDefault();
			voice.START = new Date().getTime();
			recordTimer = setTimeout(function(){
				wx.startRecord({
					success: function(){
						localStorage.rainAllowRecord = 'true';
					},
					cancel: function () {
						alert('用户拒绝授权录音');
					}
				});
			},30);
		});
		$('#startRecord').on('touchend', function(event){
			event.preventDefault();
			voice.END = new Date().getTime();

			if((voice.END - voice.START) < 30){
				voice.END = 0;
				voice.START = 0;
				//小于30ms，不录音
				clearTimeout(recordTimer);
			}else{
				wx.stopRecord({
					success: function (res) {
						voice.localId = res.localId;
//						uploadVoice();
					},
					fail: function (res) {
						alert(JSON.stringify(res));
					}
				});
			}
		});
		// 4.8 上传语音
		document.querySelector('#uploadVoice').onclick = function () {
			var book = $(this).attr("book");
			if (voice.localId == '') {
				alert('请先录制一段声音');
				return;
			}
			wx.uploadVoice({
				localId: voice.localId,
				success: function (res) {
//					alert('上传语音成功，serverId 为' + res.serverId);
//					voice.serverId = res.serverId;
					$.ajax({
						url: '/Activity/storeVoice',
						type: 'get',
						data: {'serverId':res.serverId,'book':book},
						dataType: "json",
						success: function (data) {
							alert(data.msg);
							mySwiper.slideTo(4, 1000, true);

							$(".rightTo").show();
						},
						error: function (xhr, errorType, error) {
							alert(error);
						}
					});
				}
			});
		};
		// 4.4 监听录音自动停止
		wx.onVoiceRecordEnd({
			complete: function (res) {
				voice.localId = res.localId;
				alert('录音时间已超过一分钟,试听发布吧');
			}
		});

		// 4.5 播放音频
		document.querySelector('#playVoice').onclick = function () {
			if (voice.localId == '') {
				alert('请先录制一段声音');
				return;
			}
			wx.playVoice({
				localId: voice.localId
			});
		};
		// 4.8 监听录音播放停止
//		wx.onVoicePlayEnd({
//			complete: function (res) {
//				alert('录音（' + res.localId + '）播放结束');
//			}
//		});
	})
	// 播放器
	document.addEventListener("WeixinJSBridgeReady", function () {
		document.getElementById('media').play();
	}, false);
	$('.player').on("click",function(){
		$(this).toggleClass('active');
		if($('.player').hasClass('active')){
			$(this).find('audio').attr("src","http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-3.mp3");
		}else{
			$(this).find('audio').attr("src","");
		}
	})
</script>
</body>
</html>